<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新增用户</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="css/layui.css" rel="stylesheet">
</head>
<body>
  <div style="width:80%;margin-top: 20px;">
    <form class="layui-form layui-form-pane1" lay-filter="userinfo">
      <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
          <input type="text" name="userName" required lay-verify="required|userName" lay-reqText="用户名不能为空" placeholder="请输入用户名" class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
          <input type="text" name="displayName" required lay-verify="required|nickName" lay-reqText="昵称不能为空" placeholder="请输入昵称" class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">设置密码</label>
        <div class="layui-input-inline">
          <input type="password" name="password" required lay-verify="required|pass" lay-reqText="密码不能为空" placeholder="请输入新密码" autocomplete="off" lay-affix="eye" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
          <input type="password" name="newPassword" required lay-verify="required|pass" lay-reqText="密码不能为空" placeholder="请再次输入密码" autocomplete="off" lay-affix="eye" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block">
          <select id="roleList" name="systemRoleId" lay-verify="required" lay-reqText="请选择角色" lay-search="">
            <option value="">请选择角色</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block">
          <input type="text" name="remark" placeholder="请输入备注" class="layui-input" >
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" id="btnSubmit">保存</button>
        </div>
      </div>
    </form>
  </div>
<script src="js/layui.js"></script>
<script type="module">
  import userManager from './js/user-manager.js'
  import roleManager from './js/role-manager.js'

  layui.use(['form','layer'], function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    
    // 加载角色列表
    var loadRoleList = function(){
        roleManager.getRoleList($,function(rspData){
            $.each(rspData.data,function(idx,role){
              $('#roleList').append('<option value="'+role.id+'">'+role.name+'</option>');
            });
            form.render();
        })
    }
    loadRoleList();

    form.verify({
      userName:[/(.+){4,20}$/, '用户名必须4到20位'],
      nickName:[/(.+){4,10}$/, '昵称必须4到10位'],
      pass: [/(.+){6,12}$/, '密码必须6到12位']
    });

    $('#btnSubmit').on('click', function(){
      form.submit('userinfo', function(data){
        if(data.field.password != data.field.newPassword){
          layer.msg('密码不一致', {icon: 5});
            return;
        }
        userManager.addUser($,data.field,function(rspData){
          if(rspData.code !=1){
            layer.msg("账号已存在！",{icon:5});
          } else {
            layer.msg("保存成功");
            setTimeout(() => {
              var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
              parent.layer.close(index); //再执行关闭 
              parent.location.reload(); // 刷新页面
            }, 500);
          }
        });
      });

      return false;
    });
  });
</script>
</body>
</html>